<template>
  <div class="container">
    <navbar title="联系客服" theme="light"></navbar>
    <list
          class="order-list-container"
          @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div class="wrapper">
          <image class="qrcode-img" ref="qrcodeImg" :src="customerServiceSetting.weixinQrcodeUrl" @load="e => qrcodeLoad(e)"
                 :style="{width: qrcodeWidth + 'px', height: qrcodeHeight + 'px'}"></image>
          <text class="qrcode-desc">{{customerServiceSetting.weixinDesc}}</text>
          <text class="btn btn-primary btn-large" @click="saveQrcode()">保存二维码到手机</text>
          <div class="split-space"></div>
          <div class="action-btn" >
            <text class="action-btn-text" @click="copyWeixin()">客服微信{{customerServiceSetting.weixin}}</text>
            <text class="action-btn-action" @click="copyWeixin()">复制</text>
          </div>
          <div class="split-space"></div>
          <text class="service-time">服务时间：{{customerServiceSetting.serviceTime}}</text>
        </div>
      </cell>
    </list>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/activeable";
  @import "./sass/buttons";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }
  .wrapper {
    justify-content: center;
    align-items: center;
    margin: 50px 30px 30px 30px;
  }
  .qrcode-desc {
    margin-top: 50px;
    font-size: 30px;
    color: $color;
    margin-bottom: 50px;
  }
  .split-space {
    height: 50px;
  }
  .service-time {
    font-size: 26px;
    color: $color;
    text-align: center;
  }
  .action-btn {
    position: relative;
    width: 600px;
    flex-direction: row;
    background-color: $brand-warning;
    height: 80px;
    border-radius: 80px;
    flex: 1;
    align-items: center;
    &:active {
      opacity: .6;
    }
    opacity: 1;
    &-text {
      height: 80px;
      line-height: 80px;
      border-radius: 80px;
      font-size: 32px;
      text-align: center;
      color: #ffffff;
      flex: 1;
    }
    &-action {
      height: 76px;
      border-radius: 76px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      color: $color-warning;
      background-color: #ffffff;
      width: 130px;
      text-align: center;
      margin-right: 2px;
      line-height: 76px;
    }
  }
  .btn-large {
    width: 600px;
    height: 80px;
    line-height: 80px;
    border-radius: 80px;
    font-size: 32px;
    padding: 0 40px;
  }
  .qrcode {
    &-img {

    }
    &-desc {
      font-size: 32px;
      color: $color;
    }
  }

</style>
<script>

let api = require('./include/api')
let Deferred = require('Deferred')
let modal = weex.requireModule('modal')
const clipboard = weex.requireModule('clipboard')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      customerServiceSetting: {},
      qrcodeWidth: 1,
      qrcodeHeight: 1
    }
  },
  created () {
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.customerService.data().done(rs => {
        this.customerServiceSetting = rs.data.customerServiceSetting
      })
    },
    qrcodeLoad (e) {
      // modal.alert({message: JSON.stringify(e)})
      if (e.success) {
        let size = e.size
        this.qrcodeWidth = size.naturalWidth > 350 ? 350 : size.naturalWidth
        this.qrcodeHeight = size.naturalHeight * this.qrcodeWidth / size.naturalWidth
      }
    },
    saveQrcode () {
      const $image = this.$refs.qrcodeImg
      $image.save(result => {
        if (result.success) {
          modal.toast({message: '已保存图片到相册', duration: 0.3})
        } else {
          modal.toast({message: '保存图片到相册失败', duration: 0.3})
        }
      })
    },
    copyWeixin () {
      clipboard.setString(this.customerServiceSetting.weixin)
      modal.toast({message: '已复制到剪贴板', duration: 0.3})
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.searchItem(true, () => {
        this.loadingMore = false
      })
    }
  }
}
</script>
